﻿{extend name="public:base" /}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ibox-style">
                <style lang="less">
                    .all {
                        display: flex;
                        flex-direction: column;

                        .update-btn {
                            margin-bottom: 10px;
                            width: 314px;
                        }
                    }

                    .icon-huifu {
                        font-size: 18px;
                        cursor: pointer;
                        padding: 0;
                        margin-left: 20px;
                    }

                    .ibox-style {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .content {
                        display: flex;
                        justify-content: space-between;
                        width: 55vw;
                        height: 75vh;
                        border-radius: 10px;
                        background: #fff;
                        position: relative;

                        .user-box {
                            height: 100%;
                            width: 30%;
                            border-radius: 10px 0 0 10px;
                            border-right: 1px solid rgba(0, 0, 0, .1);
                            padding-top: 20px;
                            display: flex;
                            flex-direction: column;

                            .tab-box {
                                height: 10%;
                                display: flex;
                                justify-content: space-between;

                                .tab-item {
                                    flex: 1;
                                    height: 34px;
                                    line-height: 34px;
                                    text-align: center;
                                    font-size: 16px;
                                    cursor: pointer;
                                }

                                .active {
                                    border-bottom: 2px solid #1ab394;

                                }
                            }

                            .user-list {
                                flex: 1;
                                overflow-y: auto;
                                padding: 0 10px;

                                .active {
                                    background: #ccf3eb;
                                }
                            }
                        }

                        .box {
                            display: flex;
                            margin-bottom: 10px;
                            padding: 10px;
                            cursor: pointer;

                            &:hover {
                                background: #f5f5f5;
                            }

                            &:last-child {
                                margin-bottom: 0;
                            }

                            .cover {
                                height: 50px;
                                width: 50px;
                                min-width: 0;
                                object-fit: cover;
                                border-radius: 6px;
                                margin-right: 12px;
                                flex-shrink: 0;
                            }

                            .desc-box {
                                width: calc(100% - 60px);

                                .desc {
                                    display: flex;
                                    justify-content: space-between;
                                    padding-bottom: 10px;

                                    .nickname {
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        font-size: 14px;
                                    }

                                    .time {
                                        font-size: 12px;
                                        color: #999;
                                    }
                                }

                                .msg {
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    font-size: 12px;
                                    color: #999;
                                }

                            }
                        }

                        .right-box {
                            flex: 1;
                            border-radius: 0 10px 10px 0;
                            padding: 20px 0 10px 0;
                            overflow: hidden;
                            display: flex;
                            flex-direction: column;

                            #header {
                                padding-bottom: 20px;
                                border-bottom: 1px solid rgba(0, 0, 0, .1);

                                .chat-nickname {
                                    font-size: 18px;
                                    padding-left: 20px;
                                }
                            }

                            #chat-box {
                                height: calc(100% - 260px);
                                padding: 10px 20px;
                                width: 100%;
                                border-bottom: 1px solid rgba(0, 0, 0, .1);
                                display: flex;
                                flex-direction: column;
                                overflow-y: auto;

                                .row-box {
                                    display: flex;
                                    width: 100%;
                                    height: auto;
                                    margin-bottom: 10px;

                                    .avatar {
                                        height: 40px;
                                        width: 40px;
                                        border-radius: 10px;
                                    }
                                }

                                .friend {
                                    .msg {
                                        margin-left: 10px;
                                        padding: 5px 10px;
                                        background: #f5f5f5;
                                        border-radius: 5px;
                                        max-width: 79%;
                                    }
                                }

                                .me {
                                    display: flex;
                                    flex-direction: row-reverse;

                                    .msg {
                                        margin-right: 10px;
                                        padding: 5px 10px;
                                        background: #90e7b9;
                                        border-radius: 5px;
                                        max-width: 79%;
                                    }
                                }
                            }

                            .icon-box {
                                padding: 10px 20px;

                                .icon {
                                    width: 26px;
                                    height: 26px;
                                    margin-right: 10px;
                                    cursor: pointer;
                                }
                            }

                            .entry-box {
                                flex: 1;
                                display: flex;
                                flex-direction: column;
                                padding: 0 20px;

                                .echo {
                                    flex: 1;
                                    flex-shrink: 0;
                                    border: none;
                                    outline: none;
                                    margin-bottom: 20px;
                                    font-size: 14px;
                                    -webkit-appearance: none; /* 针对 WebKit 引擎浏览器 */
                                    -moz-appearance: none; /* 针对 Firefox */
                                    appearance: none; /* 适用于现代浏览器 */
                                    resize: none; /* 禁用大小调整 */
                                }

                                .btn-box {
                                    display: flex;
                                    flex-shrink: 0;
                                    justify-content: space-between;

                                    .quick-select {
                                        width: 230px;
                                        padding: 5px 10px;
                                        outline: none;
                                        border: 1px solid #ccc;
                                    }

                                    .btn {
                                        padding: 4px 8px;
                                        border-radius: 6px;
                                        background: #1ab394;
                                        color: #fff;
                                    }

                                    .ai-btn {
                                        background: #fa9d3b;
                                        margin-right: 5px;
                                    }
                                }

                                .send-btn {
                                    width: 100px;
                                }
                            }
                        }
                    }
                </style>

                <div class="all">
                    <a href="javascript: void(0)" onclick="updateChatAndFriend()" class="update-btn btn btn-primary">私信数据一键同步</a>
                    <div class="content">
                        <div class="user-box">
                            <div class="user-list">
                                {volist name="user_list" id="vo"}
                                <div class="box user-list-box" onclick="changeChat('{$vo.id}', {$key})">
                                    <img class="cover" src="{$vo.headImgUrl}" alt="">
                                    <div class="desc-box">
                                        <div class="desc">
                                            <div class="nickname">{$vo.nickname}</div>
                                            <div class="time">{$vo.ts}</div>
                                        </div>
                                        <div class="msg">{$vo.msg}</div>
                                    </div>
                                </div>
                                {/volist}
                            </div>
                        </div>
                        <div class="right-box">
                            <div id="header">
                                <div class="chat-nickname">Dave</div>
                            </div>

                            <div id="chat-box">
                                <!--<div class="row-box friend">
                                    <img class="avatar" src="http://wx.qlogo.cn/mmhead/Q3auHgzwzM5pC6yfse8Touur4dNrHiayV1Cb35wO4B0mwYES4MoOdAg/0" alt="">
                                    <div class="msg">这是聊天内容</div>
                                </div>
                                <div class="row-box me">
                                    <img class="avatar" src="http://wx.qlogo.cn/mmhead/eTBFF2uBxbBzXcOlCAvYVpmpNBNrSLglpZVSSheGj6vm2O7YeFdU7A/0" alt="">
                                    <div class="msg">这是聊天内容</div>
                                </div>-->
                            </div>

                            <div class="icon-box">
                                <img class="icon" src="__ADMIN__/img/emoji.png">
                                <img class="icon" src="__ADMIN__/img/upload-icon.png">
                            </div>

                            <div class="entry-box">
                                <textarea class="echo"></textarea>
                                <input type="hidden" class="quick_id" value="0">
                                <div class="btn-box">
                                    <div class="choose-box">
                                        <select class="quick-select">

                                        </select>
                                        <div class="btn ai-btn" onclick="useAIMsg()">AI优化</div>
                                        <div class="btn" onclick="useMsg()">使用</div>
                                    </div>
                                    <div class="send-btn btn" onclick="sendMsg()">发送</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>{/block}

{block name="js"}
<script>
    $('.icon').click(function () {
        layer.msg('功能暂未开放', {icon: 2, time: 1000, shade: [0.3, '#000']});
    })

    $('.right-box').hide();

    var chat_user_id = 0;
    var now_msg_list = [];

    function changeChat(user_id, index) {
        var nickname = $('.user-list-box').eq(index).find('.nickname').html();
        $('#header .chat-nickname').html(nickname);

        chat_user_id = user_id;

        $('.user-list-box').removeClass('active').eq(index).addClass('active');

        layer.load(1, {shade: [0.5, '#000']})

        $.post('/index/Api/getChatContentToDb', {user_id}, res => {
            layer.closeAll();

            if (res.result == 1) {
                var {list, reply_list} = res.data;

                renderMsgList(list);

                now_msg_list = list;

                $('.right-box').show();

                var option = '';
                if (reply_list.length > 0) {
                    reply_list.forEach(val => {
                        option += `<option value="${val.id}">${val.msg}</option>`;
                    })
                }
                $('.quick-select').html(option);

                scrollToBottom();
            } else {
                layer.msg(res.msg, {icon: 2, time: 1000, shade: [0.3, '#000']});
            }
        }, 'json')
    }

    function renderMsgList(list) {
        var html = '';
        if (list.length > 0) {
            list.forEach(val => {
                html += `<div class="row-box ${val.type}">
                                    <img class="avatar" src="${val.avatar}" alt="">
                                    <div class="msg">${val.rawContent}</div>
                                </div>`;
            })
        }
        $('#chat-box').html(html);
    }

    function useMsg() {
        var quick_id = $('.quick-select').find('option:selected').val(),
          msg = $('.quick-select').find('option:selected').html();

        $('.echo').val(msg);
        $('.quick_id').val(quick_id);
    }

    function useAIMsg() {
        var quick_id = $('.quick-select').find('option:selected').val(),
          msg = $('.quick-select').find('option:selected').html();

        if (!msg) {
            layer.msg('AI回复失败', {icon: 2, time: 1000, shade: [0.3, '#000']});
            return false;
        }

        layer.load(1, {shade: [0.5, '#000']});

        $.post('/index/Api/AIQuickReply', {
            msg
        }, res => {
            layer.closeAll();
            if (res.result == 1) {
                $('.echo').val(msg);
                $('.quick_id').val(quick_id);
            } else {
                layer.msg(res.msg, {icon: 2, time: 1000, shade: [0.3, '#000']});
            }
        }, 'json')
    }

    function sendMsg() {
        var user_id = chat_user_id,
          msg = $('.echo').val(),
          quick_id = $('.quick_id').val();

        layer.load(1, {shade: [0.5, '#000']});

        $.post('/index/Api/sendPrivateMsg', {
            user_id, msg, quick_id
        }, res => {
            layer.closeAll();

            if (res.result == 1) {
                var avatar = '',
                  fromUsername = '';
                for (var i = 0; i < now_msg_list.length; i++) {
                    var msgArr = now_msg_list[i];
                    if (msgArr.type == 'me') {
                        avatar = msgArr.avatar;
                        fromUsername = msgArr.fromUsername;
                    }
                }

                var nowMsg = {
                    avatar, fromUsername, rawContent: msg, type: 'me'
                };
                now_msg_list.push(nowMsg);
                renderMsgList(now_msg_list);

                $('.echo').val('');
                $('.quick_id').val(0);

                scrollToBottom();
            } else {
                layer.msg(res.msg, {icon: 2, time: 1000, shade: [0.3, '#000']});
            }
        }, 'json')
    }

    function scrollToBottom() {
        var div = $('#chat-box');
        div.scrollTop(div[0].scrollHeight);
    }

</script>{/block}

